<template>
  <div>
    <!-- <select name="nonsense" id="nonsense" v-model="selection" required>
      <option v-for="(item, index) in optionals" :key="index" value="item"></option>
    </select> -->
    <v-select v-model="optionals" label="name" @input="handleInput" @search="handleSerch">
      <template v-slot:optional="optional">
        <h4>{{ optional }}</h4>
      </template>
    </v-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selection: '',
      optionals: ['foo', 'bar']
    }
  },
  methods: {
    handleInput() {
      console.log('input')
    },
    handleSerch() {
      console.log('search')
    }
  }
}
//https://stackoverflow.com/questions/49949054/how-to-differentiate-between-user-input-and-data-change-with-vue-select
</script>